;(function(doc){
   /**
     * oWrapper:外层盒子  
     * column:列数  
     * gap:每个img盒子之间的间隙  
     * pageNum:第几页  
     * pageSize:一共多少页  
     * heightArr:初始化img元素高度  
     * itemWidth:每个img盒子的宽度  
     */
  function Waterfall(wrapper, opt){
    this.oWrapper = doc.getElementsByClassName(wrapper)[0];
    this.column = opt.column;
    this.gap = opt.gap;
    this.imgApi = opt.imgApi;
    this.itemWidth = (this.oWrapper.offsetWidth - (this.column - 1) * this.gap) / this.column;
    this.pageNum = 0;
    this.pageSize = 0;
    this.heightArr = [];
  }

  Waterfall.prototype.init = function() {
    this.getImgDatas(this.pageNum);
    this.bindEvent();
  };

  Waterfall.prototype.bindEvent = function() {
    window.addEventListener('scroll', this.scrollToBottom.bind(this), false);
  };

  Waterfall.prototype.scrollToBottom = function() {
    if(getScrollTop() + getWindowHeight() >= getScrollHeight()){//表示已经到了当前html文档的最底部了，那就继续请求数据（html文档的高度也会随着数据的增加（数据会添加到dom上去）而增加了）
      this.pageNum++;

      if(this.pageNum <= this.pageSize - 1){//后端返回的数据只有三页，所以这里要做控制
        this.getImgDatas(this.pageNum);
      }
    }
  };

  Waterfall.prototype.getImgDatas = function(pageNum) {
    var _self = this;

    xhr.ajax({
      url: this.imgApi,
      type: 'POST',
      dataType: 'JSON',
      data: {
        pageNum: pageNum
      },
      success: function(data){
        if(data != 'NO DATA'){
          var pageData = JSON.parse(data.pageData);
          _self.pageSize = parseInt(data.pageSize);
          _self.renderList(pageData, _self.pageNum);
        }
      }
    });
  };

  Waterfall.prototype.renderList = function(data, pageNum) {
    var oFrag = doc.createDocumentFragment();

    data.forEach(function(elem, idx){
      var minIdx = getMinIdx(this.heightArr);

      var oItem = doc.createElement('div'),
          oImg = new Image();

      // var oTitle = doc.createElement('div');//这个是给每张图片下面增加文字的

      var itemLeft = (idx + 1) % this.column === 1 ? '0' : idx * (this.itemWidth + this.gap),//itemLeft判断是否是一行中的第一个img盒子，取余是1的话就是第一个，left值就是0
          minHeightElemLeft = minIdx === 0 ? 0 : (minIdx * (this.itemWidth + this.gap)),
          // itemHeight = elem.height * this.itemWidth / elem.width + 44;
          itemHeight = elem.height * this.itemWidth / elem.width;//每张图片(elem)的宽高，在json数据里面都是有的
    
      oItem.className = 'wf-item';
      //cssText会覆盖行内样式，所以用+=
      // oItem.style.cssText += `
      //    width: ${this.itemWidth}px;
      //    height: ${elem.height * this.itemWidth / elem.width}px
      // `;
      //用上面注释那样的方式更好，优化更好
      oItem.style.width = this.itemWidth + 'px';
      // oItem.style.height = (elem.height * this.itemWidth / elem.width + 44) + 'px';
      oItem.style.height = (elem.height * this.itemWidth / elem.width) + 'px';//因为已知图片宽高和盒子的宽了，利用叉乘求盒子的高度,这里可以不写盒子的高度，会自动撑开，但最好还是写一下
      oImg.src = elem.img;
      // oTitle.innerHTML = '<p>测试文本</p>';
      // oTitle.className = 'title-box';

      oItem.appendChild(oImg);
      // oItem.appendChild(oTitle);
      oFrag.appendChild(oItem);

      if(idx < this.column && pageNum == 0){
        this.heightArr.push(itemHeight);
        oItem.style.top = '0';
        oItem.style.left = itemLeft + 'px';
      }else{
        oItem.style.left = minHeightElemLeft + 'px';
        oItem.style.top = this.heightArr[minIdx] + this.gap + 'px';
        this.heightArr[minIdx] += (itemHeight + this.gap);
      }

      var t = setTimeout(function() {
        oImg.style.opacity = '1';
        clearTimeout(t);
        t = null;
      }, 100);
      
    }, this);

    this.oWrapper.appendChild(oFrag);
  };

  
  function getMinIdx(arr){
    return [].indexOf.call(arr, Math.min.apply(null, arr));
  }

  window.Waterfall = Waterfall;

})(document);








